<template>
  <div class="search-box">
    <nut-searchbar v-model="searchValue" input-background="#fff" background="#F7FBFF" clearable
      @click="jumpTo('/packageA/pages/useGoods/index')">
      <template #leftin>
        <Search2 />
      </template>
      <template #rightin>
        <Photograph />
      </template>
    </nut-searchbar>
    <div class="search-list flex-a">
      <div class="item" v-for="item in list">{{ item }}</div>
    </div>
    <Banner-Box />
    <div class="today">
      <div class="title">今日推荐</div>
    </div>
    <div class="recommend flex">
      <div class="left">
        <div class="safeguard">“正品保障”</div>
        <div class="new">
          <div class="buy">新品抢购</div>
          <nut-swiper :init-page="1" :auto-play="2000" pagination-color="#426543" pagination-unselected-color="#808080">
            <nut-swiper-item v-for="(item, index) in swiperList" :key="index"
              style="height: 280rpx;position: relative;top: 10rpx;">
              <div class="box flex-a">
                <div class="imgs">
                  <img style="width: 140rpx;height: 140rpx" :src="item.goodsCoverImg" alt="">
                </div>
                <div class="product">
                  <div class="origin">原价 : ¥{{ item.originalPrice }}</div>
                  <div class="price">新品价：<text>¥{{ item.sellingPrice }}</text></div>
                  <div class="btn" @click="jumpTo('/packageA/pages/productDetail/index?goodsId=' + item.goodsId)">立即查看
                  </div>
                </div>
              </div>
              <div class="pro-title">{{ item.goodsName }}</div>
            </nut-swiper-item>
          </nut-swiper>
        </div>
      </div>
      <div class="right">
        <div class="top flex-a" @click="jumpTo('/packageA/pages/couponList/index')">
          <div class="coupon">
            <div class="title">每日好券</div>
            <div class="info">最高可领<text>{{ max }}</text>元</div>
            <img style="width: 44rpx;height: 44rpx" src="https://cxj.szzkba.cn/upload/i/2024/09/14/152410_2.png" alt="">
          </div>
          <div>
            <img style="width: 140rpx;height: 140rpx;margin-left: 13rpx;"
              src="https://cxj.szzkba.cn/upload/i/2024/11/04/185137.jpg" alt="">
          </div>
        </div>
        <!-- @click="jumpTo('/packageA/pages/vip/index')" -->
        <div class="top bottom flex-a">
          <div class="coupon">
            <div class="title">加入我们</div>
            <div class="info">轻松创业，共创辉煌</div>
            <img style="width: 44rpx;height: 44rpx" src="https://cxj.szzkba.cn/upload/i/2024/09/14/152410_2.png" alt="">
          </div>
          <div>
            <img style="width: 91.5rpx;height: 99rpx;margin-left: 13rpx;"
              src="https://cxj.szzkba.cn/upload/i/2024/11/04/142627.jpg" alt="">
          </div>
          <nut-button open-type="contact" disabled></nut-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Taro from '@tarojs/taro'
import { toRefs, reactive, onMounted } from 'vue';
import { Searchbar } from '@nutui/nutui-taro';
import { Search2, Photograph } from '@nutui/icons-vue-taro';
import BannerBox from './BannerBox.vue';
import { getHotGoodList, getCouponMax } from '../../../api/index'
export default {
  components: {
    'nut-searchbar': Searchbar,
    Search2,
    Photograph,
    'Banner-Box': BannerBox,
  },
  setup() {
    const state = reactive({
      searchValue: "",
      list: ['陈皮', '小青柑',],
      swiperList: [],
      max: 0,
    });
    onMounted(() => {
      getHotGoodList().then(res => {
        if (res.resultCode == 200) {
          state.swiperList = res.data
        }
      })
      getCouponMax().then(res => {
        if (res.resultCode == 200) {
          state.max = res.data
        }
      })
    })
    const jumpTo = (path) => {
      Taro.navigateTo({ url: path });
    }
    const join = () => {
      Taro.openCustomerServiceChat({
        extInfo: { url: 'https://work.weixin.qq.com/kfid/kfc2e199bb356ead5c6' },
        corpId: 'ww959b513929f92e17',
        success: function (res) { },
        fail: function (res) {
          console.log(res)
        }
      })
    }
    return {
      ...toRefs(state), jumpTo, join
    };
  }
};
</script>
<style lang="scss">
.search-box {
  .nut-searchbar__search-input {
    border: 4rpx solid #0B1117;
    border-radius: 10rpx;
  }

  .search-list {
    margin: 0 32rpx 20rpx;

    .item {
      background: #F0F1F2;
      color: #9C9EA2;
      padding: 4rpx 10rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      margin-right: 20rpx;
    }
  }

  .today {
    margin: 10rpx 32rpx 0;

    .title {
      display: inline-block;
      padding: 0 10rpx 10rpx;
      font-size: 32rpx;
      color: #000;
      font-weight: bold;
      border-bottom: 10rpx solid #CEF542;
    }
  }

  .recommend {
    margin: 20rpx 32rpx 0;
    background: #fff;
    border-radius: 20rpx;

    .left {
      width: 50%;
      box-sizing: border-box;
      border-right: 2rpx solid #F2F5F7;

      .safeguard {
        border-top-left-radius: 20rpx;
        display: inline-block;
        padding: 20rpx 50rpx 40rpx;
        background: linear-gradient(to right, #92FBD0, #9FF7E5, #B0F2FF);
        font-size: 32rpx;
        font-weight: bold;
      }

      .new {
        padding: 20rpx 20rpx;
        border-top-left-radius: 20rpx;
        background: #fff;
        margin-top: -20rpx;
        position: relative;
        z-index: 99;

        .buy {
          font-size: 32rpx;
          font-weight: bold;
          padding-left: 20rpx;
        }

        .pro-title {
          font-weight: bold;
          font-size: 24rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .box {
          margin-top: 20rpx;

          .imgs {
            width: 50%;
            box-sizing: border-box;

            .img {
              position: relative;
              top: -20rpx;
            }
          }

          .product {
            width: 50%;
            box-sizing: border-box;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            .price {
              color: #FF8E30;
              margin: 10rpx 0;
              font-size: 24rpx;
            }

            .origin {
              color: #7D8081;
              font-size: 24rpx;
              text-decoration: line-through;
            }

            .btn {
              width: 120rpx;
              height: 50rpx;
              line-height: 50rpx;
              text-align: center;
              background: #111407;
              border-radius: 50rpx;
              color: #fff;
              font-size: 22rpx;
              margin: 10rpx 0 0 0;
            }
          }
        }
      }
    }

    .right {
      width: 50%;
      box-sizing: border-box;

      .top {
        padding: 20rpx 20rpx;
        border-bottom: 2rpx solid #F2F5F7;
        position: relative;

        .nut-button--default {
          border-color: transparent !important;
          background: transparent !important;
          padding: 0 !important;
          width: 100%;
          height: 200rpx;
          position: absolute;
          top: 0;
        }

        .title {
          font-weight: bold;
          font-size: 32rpx;
        }

        .info {
          margin: 20rpx 0;
          color: #7E8082;
          white-space: nowrap;
          font-size: 24rpx;

          text {
            color: #FF5835;
            margin: 0 10rpx;
          }
        }
      }

      .bottom {
        border-bottom: none;
      }
    }
  }
}
</style>